import React from 'react';

import styles from './index.less';

import { Steps, Form, Input, Button, Row, Col } from 'antd';

import { Link } from 'umi';

import {
  CheckCircleOutlined
} from '@ant-design/icons';

import { FormInstance } from 'antd/lib/form';
import ReactSimpleVerify from '../register/simpleVerify/index'

const { Step } = Steps;

const steps = [
  {
    title: '1',
    content: '填写账号',
  },
  {
    title: '2',
    content: '重置密码',
  },
  {
    title: '3',
    content: '设置完成',
  },
];


export default class ResetModel extends React.Component{
	formRef = React.createRef<FormInstance>();
	
	state = {
		current: 0
	}
	componentWillUnmount = () => {
	    this.setState = (state,callback)=>{
	      return;
	    };
	}
	
	render(){
		const children = () => {
			if(this.state.current === 0){
				return <SetUser onSuccess={ () => this.setState({current: 1}) }/>
			}else if(this.state.current === 1){
				return <ResetPassWord onSuccess={ () => this.setState({current: 2}) } />
			}
			return <Success onSuccess={ () => this.setState({current: 0}) } />
		}
		return (
			<>
				<div className={styles.top}>
					<div className={styles.header}>
                        <span className={styles.title}>重置密码</span>
                    </div>
				</div>
				<div className={styles.mainBox}>
					<div className={styles.step}>
						<Steps current={this.state.current} labelPlacement="vertical">
					        {steps.map(item => (
					          <Step key={item.title} title={item.content} />
					        ))}
					    </Steps>
				    </div>
					<div className={styles.main}>
					    {children()}
					</div>
				</div>
			</>
		)
	}
}
class SetUser extends React.Component{
	formRef = React.createRef<FormInstance>();
	componentWillUnmount = () => {
	    this.setState = (state,callback)=>{
	      return;
	    };
	}
	render(){
		return (
			<div className={styles.one}>
		    	<Form ref={this.formRef}>
		    		<Form.Item
                        name="value"
                        rules={[{ required: true, message: '请输入手机号码/邮箱/用户名!' }]}
                    >
                        <Input placeholder="请输入手机号码/邮箱/用户名" />
                	</Form.Item>
                	<Form.Item>
                        <ReactSimpleVerify success={ () => {

                        }}/>
                    </Form.Item>
                    <Form.Item>
                        <Button onClick={ () => this.props.onSuccess() } type="primary" style={{width: '100%'}} htmlType="submit">
                            下一步
                        </Button>
                    </Form.Item>
		    	</Form>
		    </div>
		)
	}
}

class ResetPassWord extends React.Component{
	formRef = React.createRef<FormInstance>();
	componentWillUnmount = () => {
	    this.setState = (state,callback)=>{
	      return;
	    };
	}
	state = {
        timeText: '获取验证码',
        disableBtn: false
    };
	times:any = null;
    handelBtnClick = () => {
        let time = 59;
        this.setState({disableBtn: true,timeText: time + 's'});
        this.times = setInterval(() => {
            time--;
            if(time === 0 || time < 0){
                this.setState({disableBtn: false,timeText: '获取验证码'});
                clearInterval(this.times)
            }else{
                this.setState({timeText: time + 's'});
            }
        },1000)
    }
	render(){
		return (
			<div className={styles.two}>
				<Form ref={this.formRef}> 
					<Form.Item >
                        <Row gutter={8}>
                            <Col span={16}>
                                <Form.Item
                                name="captchaa"
                                noStyle
                                rules={[{ required: true, message: 'Please input the captcha you got!' }]}
                                >
                                <Input placeholder="请输入验证码"/>
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Button onClick={ () => this.handelBtnClick()} disabled={this.state.disableBtn} style={{width: '100%'}} type="primary">{this.state.timeText}</Button>
                            </Col>
                        </Row>
                    </Form.Item> 
                    <Form.Item
                        name="value"
                        rules={[{ required: true, message: '请输入手机号码!' }]}
                    >
                        <Input placeholder="请输入新密码" />
                    </Form.Item>
                    <Form.Item
                        name="values"
                        rules={[{ required: true, message: '请输入手机号码!' }]}
                    >
                        <Input placeholder="请再次输入新密码" />
                    </Form.Item>
                    <Form.Item>
                        <Button onClick={ () => this.props.onSuccess() } type="primary" style={{width: '100%'}} htmlType="submit">
                            下一步
                        </Button>
                    </Form.Item>
				</Form>	
				<div>
                    <p>手机号已更换， <Link to="/user/login">联系客服</Link> </p>
                </div>
			</div>
		)
	}
}

class Success extends React.Component{
	componentWillUnmount = () => {
	    this.setState = (state,callback)=>{
	      return;
	    };
	}
	render(){
		return (
			<div className={styles.three}>
				<div className={styles.success}>
				 	<div className={styles.icon}>
				 		<CheckCircleOutlined />
				 	</div>
				 	<div className={styles.successText}>
				 		数字蜂巢密码重置成功
				 	</div>
				</div> 
				<div className={styles.submit}>
					<Button style={{width: 120}} type="primary" onClick={ () => this.props.onSuccess() }>
                        立即登录
                    </Button>
                     <div className={styles.blank}>
                        <p>5秒后自动登录并跳转 </p>
                    </div>
				</div>
			</div>
		)
	}
}
